<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>租户详情</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="./css/frame/font.css">
		<link rel="stylesheet" href="./css/frame/xadmin.css">
		<link rel="stylesheet" href="./css/page/lessee.css" />
		<script type="text/javascript" src="./lib/jquery/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="./lib/layui/layui.js"></script>
		<script type="text/javascript" src="./js/frame/xadmin.js"></script>
		<script type="text/javascript" src="./js/constant/urls.js"></script>
		<script type="text/javascript" src="./js/utils/UrlUtils.js"></script>
		<script type="text/javascript" src="./js/utils/TimeUtils.js"></script>
	</head>

	<body>
		<div class="main">
			<div class="content">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
					<legend><b>基本信息</b></legend>
				</fieldset>
				<p class="mc-info" id="name"><b>租户名：</b></p>
				<p class="mc-info" id="monthlyRent"><b>月租金：</b></p>
				<p class="mc-info" id="balance"><b>账户余额：</b></p>
				<p class="mc-info" id="payCycle"><b>缴费周期：</b></p>
				<p class="mc-info" id="lastPay"><b>上次缴费时间：</b></p>
				<p class="mc-info" id="nextPay"><b>下次缴费时间：</b></p>
				<p class="mc-info" id="address"><b>居住地址：</b></p>
				<p class="mc-info" id="checkInTime"><b>入住时间：</b></p>
				<p class="mc-info" id="cashPledge"><b>押金：</b></p>
				<p class="mc-info" id="phone"><b>手机号：</b></p>
				<p class="mc-info mc-description" id="description"><b>备注：</b></p>
			</div>
			<div class="content">
				<!-- 协议书 -->
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
					<legend><b>协议详情</b></legend>
				</fieldset>
				<div class="mcp-img" id="procotols"></div>
			</div>
			<div class="content">
				<!-- 缴费记录 -->
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
					<legend><b>缴费记录</b></legend>
				</fieldset>
				<table class="layui-hide" id="pay_log_list" lay-filter="tableFilter"></table>
			</div>
		</div>
	</body>
	<script>
		$(function() {
			// 查询结果数据渲染
			var lesseeId = getUrlsId(location.href);
			$.ajax({
				type: "get",
				url: urls.sysUrl + 'lessee/' + lesseeId,
				async: false,
				success: function(res) {
					if (res.success) {
						$('#name').append(res.data.name);
						$('#phone').append(res.data.phone);
						$('#checkInTime').append(timestampToDate(res.data.checkInTime));
						$('#cashPledge').append(res.data.cashPledge);
						$('#monthlyRent').append(res.data.monthlyRent);
						$('#balance').append(res.data.balance);
						$('#payCycle').append(res.data.payCycle + '月/次');
						$('#description').append(res.data.description);
						$('#lastPay').append(timestampToDate(res.data.lastPay));
						$('#nextPay').append(timestampToDate(res.data.nextPay));
						$('#address').append(res.data.address);
						let protocolIds = res.data.protocolIds;
						for (let ptid of protocolIds) {
							$('#procotols').append("<div class='img'><a target='_blank' href='" + urls.imgViewUrl + ptid + "'><img src='" + urls.imgViewUrl + ptid +
								"' alt='暂无图片' width='180' height='180'></a></div>");
						}
					}
				}
			});
			layui.use('table', function() {
				var table = layui.table;
				//方法级渲染
				table.render({
					elem: '#pay_log_list',
					url: urls.sysUrl + 'payLog/list?lesseeId=' + lesseeId,
					request: {
						pageName: 'pageNo',
						limitName: 'pageSize'
					},
					response: {
						statusName: 'success',
						statusCode: true,
						msgName: 'description',
						countName: 'extra',
						dataName: 'data'
					},
					parseData: function(res) {
						return {
							"success": res.success,
							"description": res.description,
							"extra": res.extra,
							"data": res.data
						};
					},
					cols: [
						[{
							field: 'payCycle',
							title: '缴费时间',
							width: 150,
							templet: function(d) {
								return timestampToDate(d.payTime);
							},
							align: 'center'
						}, {
							field: 'payMoney',
							title: '房租缴费',
							width: 120,
							align: 'center',
							templet: function(d) {
								return d.payMoney == null ? '—' : '￥' + d.payMoney;
							}
						}, {
							field: 'electricityBill',
							title: '电费',
							width: 120,
							align: 'center',
							templet: function(d) {
								return d.electricityBill == null ? '—' : '￥' + d.electricityBill;
							}
						}, {
							field: 'waterRate',
							title: '水费',
							width: 120,
							align: 'center',
							templet: function(d) {
								return d.waterRate == null ? '—' : '￥' + d.waterRate;
							}
						}, {
							field: 'description',
							title: '备注',
							width: 354,
							align: 'center'
						}]
					],
					id: 'testReload',
					page: true
				});
			});
		});
	</script>
</html>
